<template>
  <div>
    <van-dropdown-menu active-color="#15b572">
      <van-dropdown-item title="区域" ref="regions">
        <van-picker :columns="columns" ref="regionInstances" />
        <div class="collection">
          <van-button type="default" block @click="columnsCancel"
            >取消</van-button
          >
          <van-button
            type="primary"
            block
            @click="columnsConfirm"
            color="#21b97a"
            >确认</van-button
          >
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="manners">
        <van-picker :columns="manner" ref="mannerInstances" />
        <div class="collection">
          <van-button type="default" block @click="mannerCancel"
            >取消</van-button
          >
          <van-button
            type="primary"
            block
            @click="mannerConfirm"
            color="#21b97a"
            >确认</van-button
          >
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="rents">
        <van-picker :columns="rent" ref="rentInstances" />
        <div class="collection">
          <van-button type="default" block @click="rentCancel">取消</van-button>
          <van-button type="primary" block @click="rentConfirm" color="#21b97a"
            >确认</van-button
          >
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="types">
        <van-picker :columns="type" ref="typeInstances" />
        <div class="collection">
          <van-button type="default" block @click="typeCancel">取消</van-button>
          <van-button type="primary" block @click="typeConfirm" color="#21b97a"
            >确认</van-button
          >
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import { condition, inquireHousing } from '@/api/article'
export default {
  name: 'HousingScreening',
  async created () {
    const { body: renderData } = await condition(this.$store.state.user.value)
    const newObj = {}
    function setKeys (newData, oldData) {
      for (const k in oldData) {
        if (oldData[k] instanceof Array) {
          newData[k] = []
          setKeys(newData[k], oldData[k])
        } else if (oldData[k] instanceof Object) {
          newData[k] = {}
          setKeys(newData[k], oldData[k])
        } else if (k === 'label') {
          newData.text = oldData[k]
        } else {
          newData[k] = oldData[k]
        }
      }
    }
    setKeys(newObj, renderData)
    if (Object.keys(newObj).length) {
      this.columns[0] = newObj.area
      this.columns[0].children[0].children = [{ text: '', value: 'null' }]
      this.columns[1] = newObj.subway
      this.columns[1].children[0].children = [{ text: '', value: 'null' }]
      this.manner = newObj.rentType
      this.rent = newObj.price
      this.type = newObj.roomType
    }
  },
  data () {
    return {
      district: '',
      list: [],
      columns: [],
      manner: [],
      rent: [],
      type: []
    }
  },
  methods: {
    async columnsConfirm () {
      const data = this.$refs.regionInstances.getValues()
      this.$refs.regions.toggle(false)
      if (data[0].text === '区域') {
        if (data[1].children && data[1].text !== '不限') {
          if (data[2].children) {
            const res = await inquireHousing(data[2].value)
            this.$store.commit('user/rendering', res)
          } else {
            const res = await inquireHousing(data[1].value)
            this.$store.commit('user/rendering', res)
          }
        } else {
          const res = await inquireHousing(this.$store.state.user.value)
          this.$store.commit('user/rendering', res)
        }
      } else {
        const res = await inquireHousing(this.$store.state.user.value)
        this.$store.commit('user/rendering', res)
      }
    },
    columnsCancel () {
      this.$refs.regions.toggle(false)
    },
    mannerConfirm () {
      console.log(this.$refs.mannerInstances.getValues())
      this.$refs.manners.toggle(false)
    },
    mannerCancel () {
      this.$refs.manners.toggle(false)
    },
    rentConfirm () {
      console.log(this.$refs.rentInstances.getValues())
      this.$refs.rents.toggle(false)
    },
    rentCancel () {
      this.$refs.rents.toggle(false)
    },
    typeConfirm () {
      console.log(this.$refs.typeInstances.getValues())
      this.$refs.types.toggle(false)
    },
    typeCancel () {
      this.$refs.types.toggle(false)
    }
  }
}
</script>

<style lang="less" scoped>
.collection {
  display: flex;
}
</style>
